<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.js'></script>
<script src='https://cdn.jsdelivr.net/vue.router/0.7.10/vue-router.min.js'></script>
<script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js"></script>
<div id="root">
      <input type="text" value="" v-model="m" @keyup="get()">
      {{m}}<br/>
      {{msg}}<br/>
      {{'welcome'|uppercase}}
      <ul>
        <li v-for="value in myData">
          {{value}}
        </li>
      </ul>
      <p v-show="myData.length == 0">暂无数据</p>	
</div>
<script>
	//ajax 交互通常分为3类，get,post,jsonp
	//1) get 请求
	var vm = new Vue({
		el : '#root',
		data : {
			myData : [1111,2222,33333,'aaaaa','bbbbb','你啊红啊'],
			m : '你好啊',
			msg : 'hello world'
		},
		methods:{
		  get: function(){
		    this.$http.get('search',{
		      wd:this.m
		  }).then(function(res){
		  	this. myData= res.body
		  },function(res){
		  	console.log(res.status)
		})
		}
  }
	})
	//2)post 请求
</script>	
</body>
</html>